// @mainColor   : #45BCD2;

@mainColor   : rgb(69, 210, 168);
@headerHeight: 88px;
@headerColor : rgba(0, 0, 0, 0.3);


//轮播图模块开始

.czq_banner {
    width     : 100%;
    overflow-x: hidden;
    position  : relative;

    .banner-img-box {
        width: 400%;

        img {
            display: block;
            width  : 25%;
            float  : left;
        }
    }

    .banner-other-center {
        position  : absolute;
        width     : 600px;
        top       : 40%;
        left      : 50%;
        transform : translateX(-50%);
        text-align: center;

        .introduce {
            font-weight            : 700;
            font-size              : 70px;
            background-image       : linear-gradient(30deg, @mainColor, #fff, @mainColor);
            background-clip        : text;
            -webkit-background-clip: text;
            /*必需加前缀 -webkit- 才支持这个text值 */
            -webkit-text-fill-color: transparent;
            animation              : colorMove 6s linear infinite;
        }
    }

    .welcome {
        position  : absolute;
        top       : 55%;
        width     : 100%;
        text-align: center;

        span {
            display  : inline-block;
            font-size: 30px;
            margin   : 0 40px;
            color    : @mainColor;
            opacity  : 0;
        }
    }

    .banner-other-more {
        position : absolute;
        bottom   : 10%;
        right    : 10%;
        z-index  : 99;
        color    : #ccc;
        animation: arrow 1s ease infinite;

        span {
            font-size: 50px;
            cursor   : pointer;
        }
    }

    // #stars {
    //     position: fixed;
    //     top     : 0;
    //     left    : 0;
    // }
}

.czq_banner.current .welcome span {
    opacity   : 1;
    font-size : 30px;
    margin    : 0 5px;
    transition: all 1.5s ease-out 0.5s;
}

@keyframes arrow {
    0% {
        color : #ccc;
        bottom: 10%;
    }

    50% {
        color : @mainColor;
        bottom: 12%;
    }

    100% {
        color : #ccc;
        bottom: 10%;
    }
}

@keyframes colorMove {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 2000px 0
    }
}


//主体部分开始

.mainContent {
    background-position  : center;
    background-repeat    : no-repeat;
    background-size      : cover;
    background-attachment: fixed;

    .media {
        border-bottom: 1px solid @mainColor;

        h3 {
            font-size    : 22px;
            font-weight  : 700;
            color        : #fff;
            margin-bottom: 5px;
        }

        .media-info {
            font-size: 12px;
            color    : #aaa;

            span {
                padding-right: 20px;

                i {
                    padding-right: 5px;
                }
            }
        }

        .media-content {
            margin-top     : 10px;
            display        : flex;
            justify-content: space-between;
            margin-bottom  : 30px;

            img {
                display     : block;
                height      : 80px;
                margin-right: 10px;
            }

            img:hover {
                box-shadow: 0 0 5px 1px @mainColor;
            }

            p {
                font-size  : 14px;
                line-height: 20px;
                color      : #ddd;
            }

        }
    }

    .main-right-music-player {
        position           : relative;
        padding-top        : 40px;
        width              : 100%;
        height             : 200px;
        background         : url(../images/zhouzhou4.png) no-repeat;
        background-position: center;
        background-size    : cover;
        text-align         : center;

        span {
            display      : block;
            position     : absolute;
            top          : 35%;
            width        : 50px;
            height       : 50px;
            line-height  : 50px;
            font-size    : 30px;
            cursor       : pointer;
            transition   : all 0.5s ease;
            border-radius: 50%;
            color        : #fff;

            &:hover {
                color     : @mainColor;
                border    : 1px solid @mainColor;
                box-shadow: 0 0 3px red;
            }

            &:first-child {
                left: 10%
            }

            &:nth-child(2) {
                left: 30%
            }

            &:nth-child(3) {
                left: 50%
            }

            &:nth-child(4) {
                left: 70%
            }
        }

        #songName {
            color: #fff;
        }

        #curtime {
            position: absolute;
            left    : 10%;
            bottom  : 15%;
            color   : #fff;
        }

        #sumtime {
            position: absolute;
            right   : 10%;
            bottom  : 15%;
            color   : #fff;
        }

        #outline {
            position        : absolute;
            top             : 70%;
            left            : 10%;
            width           : 80%;
            height          : 2%;
            background-color: #fff;

            #innerline {
                width           : 0;
                height          : 100%;
                background-color: @mainColor;
            }
        }
    }
    .main-right-comments {
        width: 100%;
        .comment{
            margin-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px dashed skyblue;
            .comment-user{
                height: 30px;
                .comment-avatar{
                    display: inline-block;
                    margin-right: 10px;
                    width: 30px;
                    height: 30px;
                    vertical-align: bottom;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                span {
                    display: inline-block;
                    height: 30px;
                    line-height: 30px;
                }
            }
            .comment-content {
                margin-top: 10px;
                padding-left: 40px;
            }
        }
        
    }
    .addcomment{
        margin-top: 10px;
        #textarea{
            height: 80px;
            margin-bottom: 10px;
            resize: none;
        }
    }
}